<!DOCTYPE html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1,user-scalable=no, minimal-ui">
    <meta http-equiv="x-dns-prefetch-control" content="on">
    <link rel="dns-prefetch" href="https://ttk-saas.oss-cn-beijing.aliyuncs.com">
    <title>实训组件参数配置</title>
    <link rel="stylesheet" href="https://ttk-saas.oss-cn-beijing.aliyuncs.com/pc_paas_diy/ant-design-vue@1.7.3.css">
    <link rel="stylesheet" href="https://ttk-saas.oss-cn-beijing.aliyuncs.com/pc_paas_diy/diy-pass-pc.css?v=2025060901">



    <script src="https://ttk-saas.oss-cn-beijing.aliyuncs.com/pc_paas_diy/diy-pass-pc.js?v=2025060901"></script>
    <script src="https://ttk-saas.oss-cn-beijing.aliyuncs.com/pc_paas_diy/html2canvas.min.js"></script>
    <script src="{:config('web_url_oss')}/static/plugins/wang-editor/v5/index.js?v={:config('asset_version')}"></script>
    <link rel="stylesheet"
        href="https://ttk-saas.oss-cn-beijing.aliyuncs.com/pc_paas_diy/library-ant-design-vue.css?v=2025060901">
    <link rel="stylesheet"
        href="{:config('web_url_oss')}/static/plugins/wang-editor/v5/style.css?v={:config('asset_version')}">
    <style>
        [v-cloak] {
            display: none !important;
        }

        .antdVue {
            position: relative;
            width: 100%;
            background: #fff;
        }

        .zoom_bg_color {
            background: #fff;
        }
    </style>
</head>

<body>
    <div id="antdVue" :style="themeColorInit(themeColorConfig)" style="width:100%; height:100%;">
        <div class="antdVue SPECIAL_EFFECT_FULL_SCREEN_WRAPPER" v-cloak style="width:100%; height:100%;">


            <input type="hidden" id="hidden_field_member_uid" value="100102">
            <input type="hidden" id="hidden_field_user_token" value="436bdf8b-3301-bf87-d162-fc18f69dc811">
            <input type="hidden" id="hidden_field_member_id" value="11238">
            <input type="hidden" id="hidden_field_alias" value="">
            <input type="hidden" id="hidden_field_aid" value="">
            <input type="hidden" id="hidden_field_roles" value="1">
            <input type="hidden" id="web_url_oss" value="https://ttk-saas.oss-cn-beijing.aliyuncs.com">







            <div class="flex benben-flex-layout  flex-wrap   w-100 h-100 ">
                <div style="padding:20px 2%;min-width: 1100px;" class="w-100 h-100">
                    <a-form class="h-100 flex flex-direction" :form="form" :label-col="{ span: 12 }"
                        :wrapper-col="{ span: 20 }" @submit="handleSubmit">
                        <a-row>
                            <a-col :span="4" :offset="0">
                                <a-form-item label="组件分类" name="component_configuration">
                                    <a-select v-if="componentsNameList.length"
                                        v-decorator="['component_configuration', { initialValue: componentsNameList[0].aid }]">
                                        <a-select-option :value="item.aid"
                                            v-for="item in componentsNameList">{{item.component_classification_name}}</a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :span="4" :offset="1">
                                <a-form-item label="组件名称" name="component_name">
                                    <a-input v-decorator="['component_name',{
                                        rules:[{ required: true,
                                        message: '组件名称必填' }]
                                    }]" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="4" :offset="1">
                                <a-form-item label="组件标识" name="type" help="英文字母、下划线">
                                    <a-input v-decorator="['type',{
                                        rules:[{ required: true,
                                        message: '组件标识必填' }]
                                    }]" />
                                </a-form-item>
                            </a-col>


                        </a-row>

                        <div class="flex flex-direction w-full">
                            <a-row type="flex" justify="space-between">
                                <a-col>
                                    <h3>入参</h3>
                                </a-col>
                                <a-col>
                                    <!--<a-button @click="ChangeParams(1)">添加入参</a-button>-->
                                </a-col>
                            </a-row>
                            <a-row v-for="item,index in totalParams.inputParams" :key="index">
                                <a-col :span="spanLength">
                                    <a-form-item label="参数名" :name="'inputParam_name_' + index">
                                        <a-input v-decorator="['inputParam_name_' + index,{
                                            rules:[{ required: true,
                                            message: '参数名必填' }]
                                        }]" />
                                    </a-form-item>

                                </a-col>
                                <a-col :span="spanLength" :offset="offsetLength">
                                    <a-form-item label="参数别名" :name="'inputParam_alias_' + index">
                                        <a-input v-decorator="['inputParam_alias_' + index,{
                                            rules:[{ required: true,
                                                message: '参数名必填' }]
                                        }]" />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="spanLength" :offset="offsetLength">
                                    <a-form-item label="参数类型" :name="'inputParam_type_' + index">
                                        <a-select v-decorator="['inputParam_type_' + index, { initialValue: 'text' }]">
                                            <a-select-option value="text">文本</a-select-option>
                                            <a-select-option value="image">图片</a-select-option>
                                            <a-select-option value="file">文件</a-select-option>
                                        </a-select>
                                    </a-form-item>

                                </a-col>
                                <a-col :span="4" :offset="2">
                                    <a-form-item :name="'inputParam_required_' + index" :wrapper-col="{ span: 24 }">
                                        <a-radio-group
                                            v-decorator="['inputParam_required_' + index, { initialValue: 1 }]">
                                            <a-radio :value="1">
                                                必填
                                            </a-radio>
                                            <a-radio :value="2">
                                                非必填
                                            </a-radio>
                                        </a-radio-group>

                                    </a-form-item>

                                </a-col>
                                <a-col :span="2" :offset="0" style="line-height: 40px;">
                                    <span class="fu-iconfont2 a  mg-t-0 mg-r-0 mg-b-0 mg-l-10"
                                        @click="ChangeParams(1)">&#xe7b6;</span>
                                    <span style="color: #f5222d;" class="fu-iconfont2  a mg-t-0 mg-r-0 mg-b-0 mg-l-10"
                                        v-if="totalParams.inputParams.length>'1'"
                                        @click="delParams(index,1)">&#xe6be;</span>
                                </a-col>
                            </a-row>
                        </div>
                        <div>
                            <a-row type="flex" justify="space-between">
                                <a-col>
                                    <h3>出参</h3>
                                </a-col>
                                <a-col>
                                    <!--<a-button @click="ChangeParams()">添加出参</a-button>-->
                                </a-col>
                            </a-row>
                            <a-row v-for="item,index in totalParams.outputParams" :key="index">
                                <a-col :span="spanLength">
                                    <a-form-item label="参数名" :name="'outputParam_name_' + index">
                                        <a-input v-decorator="['outputParam_name_' + index,{
                                            rules:[{ required: true,
                                                message: '参数名必填' }]
                                        }]" />
                                    </a-form-item>

                                </a-col>
                                <a-col :span="spanLength" :offset="offsetLength">
                                    <a-form-item label="参数别名" :name="'outputParam_alias_' + index">
                                        <a-input v-decorator="['outputParam_alias_' + index,{
                                            rules:[{ required: true,
                                                message: '参数名必填' }]
                                        }]" />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="spanLength" :offset="offsetLength">
                                    <a-form-item label="参数类型" :name="'outputParam_type_' + index">
                                        <a-select v-decorator="['outputParam_type_' + index, { initialValue: 'text' }]">
                                            <a-select-option value="text">文本</a-select-option>
                                            <a-select-option value="image">图片</a-select-option>
                                            <a-select-option value="file">文件</a-select-option>
                                        </a-select>
                                    </a-form-item>

                                </a-col>
                                <a-col :span="4" :offset="2">
                                    <a-form-item :name="'outputParam_required_' + index" :wrapper-col="{ span: 24 }">
                                        <a-radio-group
                                            v-decorator="['outputParam_required_' + index,{ initialValue: 1 }]">
                                            <a-radio :value="1">
                                                必填
                                            </a-radio>
                                            <a-radio :value="2">
                                                非必填
                                            </a-radio>
                                        </a-radio-group>
                                    </a-form-item>

                                </a-col>
                                <a-col :span="2" :offset="0" style="line-height: 40px;">
                                    <span class="fu-iconfont2 a  mg-t-0 mg-r-0 mg-b-0 mg-l-10"
                                        @click="ChangeParams()">&#xe7b6;</span>
                                    <span style="color: #f5222d;" class="fu-iconfont2  a mg-t-0 mg-r-0 mg-b-0 mg-l-10"
                                        v-if="totalParams.outputParams.length>'1'"
                                        @click="delParams(index)">&#xe6be;</span>
                                </a-col>
                            </a-row>
                        </div>
                        <h3>接口配置</h3>
                        <a-row>
                            <a-col :span="12" :offset="0">
                                <a-form-item label="api地址" name="api" :label-col="{ span: 4 }">
                                    <a-input v-decorator="['api',{
                                        rules:[{ required: true,
                                        message: 'api地址必填' }]
                                    }]" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <h3>代码说明</h3>

                        <div class="mg-t-20 mg-b-20">
                            <editor-form v-model='richtext' style="height:300px"
                                class="ceshibiaodan123_338_fd0_0_c0_c0_c0 w-100" id="editform" :disabled="false"
                                :is_new="true"></editor-form>
                        </div>
                        <!--<a-row>-->

                        <!--    <a-col :span="12" :offset="0" >-->
                        <!--        <a-form-item label="代码说明" name='code' :label-col="{ span: 4 }">-->
                        <!--<a-input type="textarea" v-decorator="['code',{-->
                        <!--    rules:[{ required: false,-->
                        <!--    message: '代码说明必填' }]-->
                        <!--}]"></a-input>-->
                        <!--            <a-form-model-item :rules="[]" :colon="true" label="标题">-->
                        <!--                <editor-form class="ceshibiaodan123_338_fd0_0_c0_c0_c0 w-100" id="editform" :disabled="false" :is_new="true"></editor-form>-->
                        <!--            </a-form-model-item>-->
                        <!--        </a-form-item>-->
                        <!--    </a-col>-->
                        <!--</a-row>-->

                        <div style="margin-top:auto" class="flex w-100  align-center justify-center">
                            <a-button style="margin-right: 10px;" @click="close">取消</a-button>
                            <a-button type="primary" html-type="submit">提交</a-button>
                        </div>

                    </a-form>
                </div>
            </div>



        </div>
    </div>
</body>
<script src="https://ttk-saas.oss-cn-beijing.aliyuncs.com/static/plugins/vue/vue.min.js?v=2025060901"></script>
<script
    src="https://ttk-saas.oss-cn-beijing.aliyuncs.com/static/plugins/jquery/jquery-3.7.1.min.js?v=2025060901"></script>
<script src="https://ttk-saas.oss-cn-beijing.aliyuncs.com/pc_paas_diy/moment@2.20.1.min.js"></script>
<script src="https://ttk-saas.oss-cn-beijing.aliyuncs.com/pc_paas_diy/moment@2.20.1.zh-cn.js"></script>
<script
    src="https://ttk-saas.oss-cn-beijing.aliyuncs.com/pc_paas_diy/ant-design-vue@1.7.3.min.js?v=2025060901"></script>
<script src="https://ttk-saas.oss-cn-beijing.aliyuncs.com/pc_paas_diy/vue-dash-event@1.0.1.js"></script>


<script src="https://ttk-saas.oss-cn-beijing.aliyuncs.com/static/plugins/ajax/axios.js"></script>
<script src="https://ttk-saas.oss-cn-beijing.aliyuncs.com/pc_paas_diy/u-charts.js"></script>
<script>

    const themeColorConfig = { "presetApi": { "getClassifyOne": "", "getClassifyTow": "", "getClassifyShop": "" }, "themeType": 0, "themeConfig": [{ "colorConfig": ["#333333", "#666666", "#999999", "#ffffff", "#0052c7", "#F02325", "#FC9C3A", "#4DC777", "#F2CC98", "#F2CC66"], "bgColorConfig": ["#EBEDF8", "#FFFFFF", "#0052c7", "#FC9C3A", "#FC9fff", "#E6F333", "#E6F1FE", "linear-gradient(301deg, #EBBA7B 0%, #F8D9AD 100%)", "linear-gradient(180deg, #F5588E 0%, #F0403C 100%)", "linear-gradient(179deg, #FFD033 0%, #F4890E 100%)"], "bdColorConfig": ["#EBEDF8", "#FFFFFF", "#0052c7", "#FC9C3A", "#333333", "#666666", "#999999", "#dddddd", "#1178F0", "#F02325"] }] };
    const { LocaleProvider, locales, message, Modal } = window.antd;
    Vue.prototype.$message = message
    Vue.use(window['vue-dash-event'])
    const ShowIframedrawer = Vue.extend(iframedrawer)
    iframedrawer.install = function (data) {
        let instance = new ShowIframedrawer({
            data
        }).$mount()
        document.body.appendChild(instance.$el)
        Vue.nextTick(() => { instance.show = true })
    }
    const ShowIframemodal = Vue.extend(iframemodal)
    iframemodal.install = function (data) {
        let instance = new ShowIframemodal({
            data
        }).$mount()
        document.body.appendChild(instance.$el)
        Vue.nextTick(() => { instance.show = true })
    }
    function getUrlKey(name) {
        let val = decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20'))
        if (val) {
            return val
        } else {
            var url = location.href.split('/' + name + '/')
            if (url.length > 1) {
                var arr = url[1].split('.')[0].split('?')[0].split('/')
                if (arr.length) {
                    return isEmpty(arr[0]) ? null : arr[0]
                }
            }
            return null
        }
    }

    var user_token = $('#hidden_field_user_token').val();
    var public_headers = { 'user-token': user_token }

    var member_id = $('#hidden_field_member_id').val();
    var hidden_field_alias = $('#hidden_field_alias').val();
    var hidden_field_aid = $('#hidden_field_aid').val();
    var hidden_field_roles = $('#hidden_field_roles').val();
    var web_url_oss = $('#web_url_oss').val();



    const AD_MANGER = new Vue({
        el: '#antdVue',
        mixins: [],
        data() {
            receive(this);
            return {
                components_id: 0,
                richtext: '',
                totalParams: {
                    inputParams: [
                        {
                            paramName: '',
                            name: '',
                            fieldType: 0,
                            isMust: 1,
                            dataType: [
                                "Number",
                                "String"
                            ],
                            c_field: '',
                            type: "constantData",

                        }
                    ],
                    outputParams: [
                        {
                            paramName: '',
                            name: '',
                            fieldType: 0,
                            isMust: 1,
                            dataType: [
                                "String"
                            ],
                            c_field: '',
                            type: 'functionParams'
                        }
                    ]
                },
                spanLength: 4,
                offsetLength: 1,
                suanfaList: [{
                    name: 'API类型',
                    aid: 0
                }, {
                    name: 'input类型',
                    aid: 1
                }],
                form: this.$form.createForm(this, { name: 'coordinated' }),
                baseURL: 'https://yufabu.saizhuge.net',
                themeColorConfig, locale: locales[lang_to_antd[current_lang]], "viewSource": "PC", componentsNameList: []
            };
        },
        components: {
            editorForm
        },
        computed: {

        },
        created() {
            if (window.parent.document) {
                var themeColor
                if (window.parent.SAI_ZHU_GE_MAIN_VUE_APP) {
                    var style = window.parent.document.getElementsByTagName('style')
                    themeColor = window.parent.SAI_ZHU_GE_MAIN_VUE_APP.$store.getters.color
                    for (var i = 0; i < style.length; i++) {
                        var id = style[i].id
                        if (id && id.indexOf("css_") > -1) {
                            var styleEl = document.createElement('style');
                            styleEl.innerHTML = style[i].innerText;
                            document.head.appendChild(styleEl);
                        }
                    }
                } else {
                    var cookieData = window.parent.parent && window.parent.parent.document.cookie.split(";") || window.parent.document.cookie.split(";") || []
                    if (cookieData.length) {
                        for (var i = 0; i < cookieData.length; i++) {
                            var temp = cookieData[i].split("=");
                            if (temp[0] == "Huiskin") {
                                var colorObj = { orange: '#cb4400', default: themeColorConfig.themeConfig[0].colorConfig[4], black: "#222d32", blue: "#4e73df", purple: "#605ca8" }
                                themeColor = colorObj[temp[1]];
                            }

                        }
                    }
                }
                if (themeColor) {
                    var themeConfig = this.themeColorConfig.themeConfig
                    themeConfig[0].colorConfig[4] = themeColor
                    themeConfig[0].bgColorConfig[2] = themeColor
                    themeConfig[0].bdColorConfig[2] = themeColor
                    this.themeColorConfig.themeConfig = themeConfig
                    console.log(this.themeColorConfig, themeConfig)
                }

            }
            if (getUrlKey('viewSource')) { this.viewSource = getUrlKey('viewSource'); }
        },
        mounted() {
            this.getList()
            console.log(getUrlKey('aid'))
            if (getUrlKey('aid')) {
                const aid = getUrlKey('aid')
                this.components_id = aid
                this.getComponentsDetail(aid)
            }
        },
        beforeDestroy() {

        },
        watch: {

        },
        methods: {
            isEmpty,
            delParams(idx, type) {
                if (type == 1) {
                    this.totalParams.inputParams.splice(idx, 1)
                } else {
                    this.totalParams.outputParams.splice(idx, 1)
                }
            },
            ChangeParams(type) {
                // 添加入参
                if (type == 1) {
                    const newIndex = this.totalParams.inputParams.length;
                    this.totalParams.inputParams.push({
                        paramName: '',
                        name: '',
                        fieldType: 'text',
                        isMust: 1,
                        dataType: ["Number", "String"],
                        c_field: '',
                        type: "functionParams"
                    });
                } else {
                    const newIndex = this.totalParams.outputParams.length;
                    this.totalParams.outputParams.push({
                        paramName: '',
                        name: '',
                        fieldType: 'text',
                        isMust: 1,
                        dataType: ["String"],
                        c_field: 'param1_uJRU',
                        type: "functionParams"
                    });
                }
            },
            close() {
                window.parent.layer.closeAll()
            },
            async editComponentDetail(data) {

                const resParse = await fetch(`${this.baseURL}/api/m${member_id}/6848e927d0279`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'User-Token': user_token
                    },
                    body: JSON.stringify(data),
                })
                const res = await resParse.json()
                console.log('res修改', res)
            },
            async getComponentsDetail(aid) {
                const resParse = await fetch(`${this.baseURL}/api/m${member_id}/6848e7f9e3de6?aid=${aid}`)
                const res = await resParse.json()
                console.log(res)
                if (res.code === '1' && res.data) {
                    const detail = res.data;

                    // 设置基础字段
                    this.form.setFieldsValue({
                        component_name: detail.component_name,
                        api: detail.api,
                        type: detail.type,
                        trainingsmodulecategory_id: detail.trainingsmodulecategory_id,
                    });
                    this.richtext = detail.code
                    // 使用 $set 更新嵌套数组，保证响应式
                    const parsedData = JSON.parse(detail.component_configuration);
                    this.$set(this.totalParams, 'inputParams', parsedData.inputParams || []);
                    this.$set(this.totalParams, 'outputParams', parsedData.outputParams || []);

                    // 延迟设置表单字段，等待 DOM 渲染完成
                    this.$nextTick(() => {
                        // 设置入参字段
                        parsedData.inputParams.forEach((item, index) => {
                            this.form.setFieldsValue({
                                [`inputParam_name_${index}`]: item.paramName,
                                [`inputParam_alias_${index}`]: item.name,
                                [`inputParam_type_${index}`]: item.fieldType,
                                [`inputParam_required_${index}`]: item.isMust
                            });
                        });

                        // 设置出参字段
                        parsedData.outputParams.forEach((item, index) => {
                            this.form.setFieldsValue({
                                [`outputParam_name_${index}`]: item.paramName,
                                [`outputParam_alias_${index}`]: item.name,
                                [`outputParam_type_${index}`]: item.fieldType,
                                [`outputParam_required_${index}`]: item.isMust
                            });
                        });
                    });
                }
            },
            async getList() {
                console.log(baseURL)
                const resParse = await fetch(`${this.baseURL}/api/m${member_id}/6836d439626f0`)
                const res = await resParse.json()
                console.log(res)
                if (res.code !== '1') return this.$message.error(res.msg)
                if (!res || !res.data || res.data.length === 0) return
                this.componentsNameList = res.data
                console.log(this.componentsNameList)
            },
            async submitForm(data) {
                const resParse = await fetch(`${this.baseURL}/api/m${member_id}/6847f91067ad8`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'User-Token': user_token
                    },
                    body: JSON.stringify(data),
                })
                const res = await resParse.json()
                console.log(res)
            },
            handleSubmit(e) {
                e.preventDefault();
                console.log('this.totalParams', this.totalParams)
                console.log('this.FormData', this.formData)
                this.form.validateFields(async (err, values) => {
                    if (!err) {
                        console.log('原始 values:', values);
                        const component_name = values['component_name'];
                        const trainingsmodulecategory_id = values['component_configuration'];
                        const api = values['api'];
                        const type = values['type'];
                        const inputParams = [];
                        const outputParams = [];
                        const code = this.richtext
                        // 提取入参
                        Object.keys(values).forEach(key => {
                            if (key.startsWith('inputParam_name_')) {
                                const index = key.replace('inputParam_name_', '');
                                inputParams[index] = {
                                    paramName: values[key],
                                    name: values[`inputParam_alias_${index}`],
                                    fieldType: values[`inputParam_type_${index}`],
                                    isMust: values[`inputParam_required_${index}`],
                                    dataType: ["Number", "String"],
                                    c_field: '',
                                    type: "functionParams"
                                };
                            }
                        });

                        // 提取出参
                        Object.keys(values).forEach(key => {
                            if (key.startsWith('outputParam_name_')) {
                                const index = key.replace('outputParam_name_', '');
                                outputParams[index] = {
                                    paramName: values[key],
                                    name: values[`outputParam_alias_${index}`],
                                    fieldType: values[`outputParam_type_${index}`],
                                    isMust: values[`outputParam_required_${index}`],
                                    dataType: [
                                        "String"
                                    ],
                                    c_field: '',
                                    type: 'functionParams'

                                };
                            }
                        });
                        // 去除数组中的 undefined
                        const cleanedInputParams = inputParams.filter(Boolean);
                        const cleanedOutputParams = outputParams.filter(Boolean);
                        // 构造最终要提交的数据
                        const submitData = {
                            component_name,
                            trainingsmodulecategory_id,
                            api,
                            type,
                            component_configuration: JSON.stringify({
                                inputParams: cleanedInputParams,
                                outputParams: cleanedOutputParams
                            }),
                            code
                        };
                        // 判断当前的组件id 如果id存在说明是修改 反之是新增组件
                        if (this.components_id) {
                            submitData.aid = this.components_id
                            this.editComponentDetail(submitData)
                            this.$message.success('修改成功')
                        } else {
                            this.submitForm(submitData)
                            this.$message.success('添加成功')
                        }
                        await new Promise(resolve => setTimeout(resolve, 1000))
                        window.parent.layer.closeAll()
                        window.parent.postMessage({
                            ident: 'diy_antd_vue',
                            data: [{
                                type: "back",
                                not_refresh: 0
                            }]
                        }, '*');
                    }
                });
            },
            lodopPrint() {
                document.querySelector('.btn').style.opacity = 0
                document.querySelector('.ant-pagination') && (document.querySelector('.ant-pagination').style.opacity = 0)
                html2canvas(document.querySelector("#antdVue")).then(canvas => {
                    let baseCode = canvas.toDataURL('image/png')
                    let idx = baseCode.indexOf('image/png;base64,')
                    baseCode = baseCode.substring(idx + 'image/png;base64,'.length)
                    let data = window.atob(baseCode)
                    let len = data.length
                    let arr = new Uint8Array(len)
                    for (let i = 0; i < len; ++i) {
                        arr[i] = data.charCodeAt(i)
                    }
                    let blob = new Blob([arr], { type: 'image/png' })
                    //创建文件的url
                    let blobURL = window.URL.createObjectURL(blob)
                    this.printerUrl = blobURL
                    document.querySelector('.btn').style.opacity = 1
                    document.querySelector('.ant-pagination') && (document.querySelector('.ant-pagination').style.opacity = 1)
                    //加载完成后打印
                    let iframe = document.getElementById('downloadFrame')
                    iframe.onload = function () {
                        iframe.focus()
                        iframe.contentWindow.print()
                    }
                });
            },

        }
    });
</script>